<template>
    <div>
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="3">
                        <el-select v-model="page.qData.type" clearable placeholder="类型" size="small">
                            <el-option
                                    v-for="item in typeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="3">
                        <el-select v-model="page.qData.status" clearable placeholder="状态" size="small">
                            <el-option
                                    v-for="item in statusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-cascader
                                placeholder="社区"
                                size="small"
                                :options="regionOptions"
                                v-model="page.qData.community" clearable>
                        </el-cascader>
                    </el-col>
                    <el-col :span="4">
                        <el-date-picker
                                v-model="page.qData.ctime"
                                type="date"
                                size="small"
                                style="width: 135px"
                                placeholder="创建时间"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="4">
                        <el-date-picker
                                v-model="page.qData.atime"
                                type="date"
                                size="small"
                                style="width: 135px"
                                placeholder="审核时间"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">搜索</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="text" @click="aData.visible = true">添加</el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <div style="margin-top: 5px">
                    <el-table
                            :data="table.tableData"
                            v-loading="table.loading"
                            style="width: 100%">
                        <el-table-column
                                fixed
                                prop="ctime"
                                label="创建日期"
                                width="160"
                                :formatter="table.formatters.unix2Date">
                        </el-table-column>
                        <el-table-column
                                fixed
                                prop="atime"
                                label="审核日期"
                                width="160"
                                :formatter="table.formatters.unix2Date">
                        </el-table-column>
                        <el-table-column
                                label="用户名"
                                width="180">
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <p>用户uid: {{ scope.row.uid }}</p>
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">{{ scope.row.username }}</el-tag>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="类型"
                                width="180"
                                :formatter="table.formatters.type">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="状态"
                                width="180"
                                :formatter="table.formatters.status">
                        </el-table-column>
                        <el-table-column
                                prop="community"
                                label="社区"
                                width="180"
                                :formatter="table.formatters.community">
                        </el-table-column>
                        <el-table-column label="操作" width="180" fixed="right">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        v-show="scope.row.type===1"
                                        @click="handleEdit(scope.$index, scope.row)">审核</el-button>
                                <el-button
                                        size="mini"
                                        v-show="scope.row.type===1"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
            <el-footer>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.currentPage.current"
                            :page-sizes="[7,14,21,28]"
                            :page-size="page.currentPage.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>
        <!--弹出框-->
        <div>
            <el-dialog title="新增身份认证信息" :visible.sync="aData.visible" width="40%">
                <el-form :model="aData.form" :rules="aData.rules" ref="aForm" v-loading="aData.form.loading">
                    <el-form-item label="用户uid" :label-width="formLabelWidth">
                        <el-input type="text" v-model="aData.form.uid" autocomplete="off" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="社区" :label-width="formLabelWidth">
                        <el-input type="text" v-model="aData.form.community" autocomplete="off" placeholder="社区"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" :label-width="formLabelWidth">
                        <el-radio-group v-model="aData.form.type">
                            <el-radio :label="0">居民</el-radio>
                            <el-radio :label="1">社区长</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-radio-group v-model="aData.form.status">
                            <el-radio :label="0">待审核</el-radio>
                            <el-radio :label="1">审核中</el-radio>
                            <el-radio :label="2">通过</el-radio>
                            <el-radio :label="3">未通过</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="aData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleAdd">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="审核社区长身份认证信息" :visible.sync="uData.visible" width="30%">
                <el-form :model="uData.form" :rules="uData.rules" ref="uForm" v-loading="uData.loading">
                    <el-form-item label="社区" :label-width="formLabelWidth">
                        <el-cascader
                                placeholder="社区"
                                size="small"
                                :options="regionOptions"
                                v-model="uData.form.community" clearable disabled>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="类型" :label-width="formLabelWidth">
                        <el-radio-group v-model="uData.form.type" disabled>
                            <el-radio :label="0">居民</el-radio>
                            <el-radio :label="1">社区长</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-radio-group v-model="uData.form.status">
                            <el-radio :label="0">待审核</el-radio>
                            <el-radio :label="1">审核中</el-radio>
                            <el-radio :label="2">通过</el-radio>
                            <el-radio :label="3">未通过</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="uData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleEdit">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog
                    title="提示"
                    :visible.sync="dData.visible"
                    width="30%"
                    center>
                <span>您确定要删除身份认证: {{dData.form.username}}</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleDelete">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {CodeToText, regionDataPlus} from "element-china-area-data";

    export default {
        name: "identityAuth",
        data() {
            return {
                //分页
                page: {
                    currentPage:{
                        current: 1,
                        size: 7,
                    },
                    total: 0,
                    qData:{
                        type:undefined,
                        status:undefined,
                        ctime:undefined,
                        mtime:undefined,
                        atime:undefined,
                        community:[],
                    },
                },
                typeOptions:[{
                    value: 0,
                    label: '居民'
                }, {
                    value: 1,
                    label: '社区长'
                }],
                statusOptions:[{
                    value: 0,
                    label: '待审核'
                }, {
                    value: 1,
                    label: '审核中'
                },{
                    value: 2,
                    label: '通过'
                }, {
                    value: 3,
                    label: '失败'
                }],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                //表格
                table: {
                    tableData: [],
                    loading:false,
                    formatters:{
                        status:(row, column, cellValue)=>{
                            let ret = '';  //你想在页面展示的值
                            switch (cellValue) {
                                case 0:
                                    ret='待审核';
                                    break;
                                case 1:
                                    ret='审核中';
                                    break;
                                case 2:
                                    ret='通过';
                                    break;
                                case 3:
                                    ret='未通过';
                                    break;
                                default:
                                    ret='未知';
                                    break;
                            }
                            return ret;
                        },
                        type:(row, column, cellValue)=>{
                            let ret = '';  //你想在页面展示的值
                            switch (cellValue) {
                                case 0:
                                    ret='居民';
                                    break;
                                case 1:
                                    ret='社区长';
                                    break;
                                default:
                                    ret='未知';
                                    break;
                            }
                            return ret;
                        },
                        unix2Date:(row, column, cellValue)=>{
                            return this.unix2Date(cellValue);
                        },
                        community:(row, column, cellValue)=>{
                            console.log(cellValue[0])
                            return CodeToText[cellValue[0]] + '/' + CodeToText[cellValue[1]]+ '/' + CodeToText[cellValue[2]];
                        }
                    }
                },
                selected:['440000','440300','440305'],
                //添加
                aData: {
                    visible: false,
                    loading: false,
                    form: {
                        uid: -1,
                        community: [],
                        type: 0,
                        status: 0,
                    },
                    rules: {
                        uid: [
                            { required: true, message: '请输入路径规则', trigger: 'blur' }
                        ],
                        community: [
                            { required: true, message: '请输入描述', trigger: 'blur' }
                        ]
                    }
                },
                //修改
                uData: {
                    visible: false,
                    loading: false,
                    form: {
                        id: -1,
                        community: [],
                        type: 0,
                        status: 0,
                    },
                    rules: {
                        community: [
                            { required: true, message: '请输入描述', trigger: 'blur' }
                        ]
                    }
                },
                //删除
                dData: {
                    visible: false,
                    loading: false,
                    form: {
                        id: -1,
                        uid: -1,
                        username:'',
                    },
                },
                regionOptions: regionDataPlus,
                formLabelWidth: '120px'
            }
        },
        methods: {
            //每页大小
            handleSizeChange(size) {
                console.log(`每页 ${size} 条`);
                this.page.currentPage.size=size;

                if (this.page.keyword){
                    this.handleSearch();
                }else {
                    let identityAuthVo=this.page.currentPage;
                    this.loadTableData(identityAuthVo);
                }
            },
            //当前页
            handleCurrentChange(current) {
                console.log(`当前页: ${current}`);
                this.page.currentPage.current=current;
                if (this.page.qData){
                    this.handleSearch();
                }else {
                    let identityAuthVo=this.page.currentPage;
                    this.loadTableData(identityAuthVo);
                }
            },
            //修改
            handleEdit(index, row) {
                if(row){
                    //修改弹出框信息
                    console.log(`当前索引: ${index}`);
                    this.uData.form={
                        id: row.id,
                        community: row.community,
                        type: row.type,
                        status: row.status,
                    };
                    this.uData.visible=true;
                }else {
                    //提交权限修改信息
                    const _this = this;
                    this.$refs.uForm.validate((valid) => {
                        if (valid) {
                            _this.uData.loading=true;
                            let identityAuthVo=_this.uData.form;
                            this.putRequestJson("/identityauth/auditd",identityAuthVo)
                                .then(resp =>{
                                    if (resp && resp.data && resp.data.code === '200') {
                                        _this.uData.loading=false;
                                        _this.uData.visible=false;
                                        //清空数据
                                        _this.uData.form={
                                            id: -1,
                                            community: "",
                                            type: 0,
                                            status: 0,
                                        };
                                        _this.handleSearch();
                                    }else {
                                        _this.uData.loading=false;
                                    }
                                })
                        }
                    });
                }
            },
            //删除
            handleDelete(index, row) {
                if(row){
                    //修改弹出框信息
                    console.log(`当前索引: ${index}`);
                    this.dData.form.id=row.id;
                    this.dData.form.uid=row.uid;
                    this.dData.form.username=row.username;
                    this.dData.visible=true;
                }else {
                    //提交权限删除信息
                    const _this = this;
                    _this.dData.loading=true;
                    let ids=[];
                    ids.push(_this.dData.form.id);
                    this.deleteRequest("/identityauth/d/"+ids)
                        .then(resp =>{
                            if (resp && resp.data && resp.data.code === '200') {
                                _this.dData.loading=false;
                                _this.dData.visible=false;
                                //清空数据
                                _this.dData.form={
                                    id: -1,
                                    uid: -1,
                                };
                                _this.handleSearch();
                            }else {
                                _this.dData.loading=false;
                            }
                        })
                }
            },
            //添加权限
            handleAdd(){
                const _this = this;
                this.$refs.aForm.validate((valid) => {
                    if (valid) {
                        _this.aData.loading=true;
                        let identityAuthVo=_this.aData.form;
                        this.postRequestJson("/identityauth/a",identityAuthVo)
                            .then(resp =>{
                                if (resp && resp.data && resp.data.code === '200') {
                                    _this.aData.loading=false;
                                    _this.aData.visible=false;
                                    //清空数据
                                    _this.aData.form={
                                        uid: -1,
                                        community: "",
                                        type: 0,
                                        status: 0,
                                    };
                                    _this.handleSearch();
                                }else {
                                    _this.aData.loading=false;
                                }
                            })
                    }
                });
            },
            //搜索
            handleSearch(){
                let searchParam={
                    type:this.page.qData.type,
                    status:this.page.qData.status,
                    ctime:this.page.qData.ctime,
                    atime:this.page.qData.atime,
                    community:this.page.qData.community.length>0?this.page.qData.community.toString():"",
                    current: this.page.currentPage.current,
                    size: this.page.currentPage.size
                };
                const _this = this;
                _this.table.loading=true;
                this.getRequest("/identityauth/search",searchParam)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            _this.table.tableData=data.result.records;
                            _this.page.total=data.result.total;
                            _this.table.loading=false;
                            _this.page.currentPage={
                                current: 1,
                                size: 7,
                            };
                        }else {
                            _this.table.loading=false;
                        }
                    })
            },
            //装载权限
            loadTableData(identityAuthVo){
                const _this = this;
                _this.table.loading=true;
                this.getRequest("/identityauth/getWithUserNameByPage",identityAuthVo)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            _this.table.tableData=data.result.records;
                            _this.page.total=data.result.total;
                            _this.table.loading=false;
                        }else {
                            _this.table.loading=false;
                        }
                    })
            },
        },
        mounted() {
            //装载第一页数据
            let identityAuthVo = this.page.currentPage;
            this.loadTableData(identityAuthVo);
        }
    }
</script>

<style scoped>

    .input-search {
        width: 150px;
        margin-left: 300px;
    }

    .input-form{
        width: 150px;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 150%;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        align-content: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>